<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../assets/js/vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<p v-freddy="color">{{num}}</p>
			<button @click="add">add</button>
		</div>
		<script>
			Vue.directive("freddy",{
				bind:function(el,binding){//被绑定
				     el.style='color:'+binding.value;
				},
				inserted:function(){//绑定到节点
				      console.log('2 - inserted');
				},
				update:function(){//组件更新
				      console.log('3 - update');
				},
				componentUpdated:function(){//组件更新完成
				      console.log('4 - componentUpdated');
				},
				unbind:function(){//解绑
				      console.log('1 - bind');
				}
			})
			var app = new Vue({
				el:"#app",
				data:{
					num:10,
					color:"blue"
				},
				methods:{
					add:function(){
						this.num++;
					}
				}
			})
		</script>
	</body>
</html>
